import 'package:flutter/material.dart';
// 导入假数据
import '../data/CustomData.dart';
// 请求数据
import 'package:dio/dio.dart';
// 解析数据
import 'dart:convert';

class MovieDetail extends StatefulWidget {
  MovieDetail({
    Key key,
    @required this.name,
    @required this.id,
  }) : super(key: key);
  final String name;
  final id;

  @override
  _MovieDetailState createState() => _MovieDetailState();
}

class _MovieDetailState extends State<MovieDetail> {
  // 下划线一般代表私有数据
  Map _map = new CustomData().detailMap;

  // 这个是我们请求回来的数据
  Map _mapdata = {};
  // false 代表未请求到
  bool _reqflag = false;

  // 通过id去请求数据
  getDetailMap() async {
    try {
      Dio _dio = new Dio();
      Response response = await _dio
          .get('http://m.maoyan.com/ajax/detailmovie?movieId=${widget.id}');
      Map responseData = jsonDecode(response.toString());

      // 我们请求完数据 不要重新赋值
      // 当前页面比较特殊，需要使用 假数据， 所以不能把以前的东西删除掉
      setState(() {
        _mapdata = responseData["detailMovie"];
        _reqflag = true;
      });
    } catch (err) {
      print(err);
    }
  }

  @override
  void initState() {
    getDetailMap();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // widget代表了我们的 MovieDetail 这个类
        // 当前类是控制器，需要用 widget.属性名 来访问被控制的类接收到的参数
        title: Text('${widget.name}'),
      ),

      // 因为从上到下的排版很长，超过一屏幕的高度，因此不能使用 Column，Column高度会溢出
      body: ListView(
        children: <Widget>[
          // 第一个图片
          Padding(
            padding: EdgeInsets.fromLTRB(80, 80, 80, 30),
            child: Container(
              height: 270,
              child: Image(
                fit: BoxFit.cover,
                // true 得到数据了, 使用正常数据
                // false 没有数据, 渲染loading图
                image: _reqflag
                    ? NetworkImage('${_resetimg(_mapdata["img"])}')
                    : AssetImage('images/loading.png'),
              ),
            ),
          ),

          // 之后一个个往后排列我们的文字
          TextSection(title: '名称', text: '${widget.name}'),
          TextSection(title: '年代', text: '${_map["year"]}'),
          TextSection(title: '产地', text: '${_map["src"]}'),
          TextSection(title: '类别', text: '${_map["cat"]}'),
          TextSection(title: '语言', text: '${_map["language"]}'),
          TextSection(title: '上映日期', text: '${_map["comingTitle"]}'),
          TextSection(title: '豆瓣评分', text: '${_map["sc"]}'),
          TextSection(title: '片长', text: '${_map["howLong"]}'),
          TextSection(title: '导演', text: '${_map["director"]}'),
          TextSection(title: '主演', text: '${_map["star"]}', axisFlag: true),
          TextSection(
              title: '简介',
              text: '${_reqflag ? _mapdata["dra"] : _map["dra"]}',
              axisFlag: true),
        ],
      ),
    );
  }

  String _resetimg(img) => img.replaceAll('/w.h/', '/');
}

// 我们把下面纵向的排列的文本进行了一次封装
class TextSection extends StatelessWidget {
  TextSection({
    Key key,
    @required this.title,
    @required this.text,
    this.axisFlag,
  }) : super(key: key);

  final String title;
  final String text;
  final bool axisFlag;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
      child: Row(
        // 纵轴对齐,但是需要单独处理，只有主演项和简介内容区域的时候才适合
        // 所以根据传递过来的参数确实使用顶部对齐或者是中间对齐
        crossAxisAlignment: axisFlag == true
            ? CrossAxisAlignment.start
            : CrossAxisAlignment.center,
        children: <Widget>[
          // 左半部分是 title
          Container(
            width: 89,
            child: Text('◎  ${_titleReset(title)}'),
          ),
          // 右半部分是内容
          Expanded(
            child: Padding(
              padding: EdgeInsets.only(left: 0),
              child: Text('$text'),
            ),
          ),
        ],
      ),
    );
  }

  String _titleReset(String title) {
    if (title.length == 2) {
      return '${title[0]}        ${title[1]}';
    } else {
      return title;
    }
  }
}
